// 1. 单击事件
$(function () {
  $('.box').on('tap', function () {
    // console.log('单击事件')
  })
})

// 2. 单击事件
$(function () {
  $('.box').on('doubletap', function () {
    // $(this).css('backgroundColor', 'blue')
  })
})

// 3. 左滑动
$(function () {
  $('.box').on('swipeleft', function () {
    // $(this).css('backgroundColor', 'black')
  })
})

// 4. 右滑动
$(function () {
  $('.box').on('swiperight', function () {
    // $(this).css('backgroundColor', 'yellow')
  })
})

// 5. 拖拽效果
$(function () {
  let left = parseFloat($('.box').css('left'))
  let top = parseFloat($('.box').css('top'))
  $('.box').on('drag', function (e) {
    e.preventDefault()
    let { distanceX, distanceY } = e.detail
    $(this).css({ left: distanceX + left + 'px', top: distanceY + top + 'px' })
  })
  $('.box').on('dragend', function (e) {
    e.preventDefault()
    x = e.detail.distanceX
    y = e.detail.distanceY
    top += y
    left += x
  })
})
